<template>
	<view class="font singleTopicSelection">
		<view style="background-color: white;height: 300rpx;">
			<view class="title">
				<span>*</span><label>标题</label>
				<uni-easyinput type="textarea" v-model="title" placeholder="请输入内容" autoHeight></uni-easyinput>
			</view>
		</view>
		<label style="margin-left: 30rpx;">选项</label>
		<view style="background-color: white;">
			<drag style="display: flex; justify-content: center;" :controlsList="optionArray" :containerSize="{width: '100vw'}" :controlsSize="{width: 100, height: 35}" @change='haha($event)' />
			<view class="Divider" />
			<view class="addOption" @tap="addInner">
				<image src="../../static/add.png" class="deleteOption" >添加选项</image>
			</view>
		</view>
		<label style="margin-left: 30rpx;">设置</label>
		<view style="background-color: white;">
			<view class="min-switch">
			  <text class="text">此题必须回答</text>
			  <switch
			    :checked='isMustAnswer'
			    @change="mustAnswer"
			    color="#80b156"
			    style="transform: scale(0.7,0.7)"
			  />
			</view>
			<view class="min-switch">
			  <text class="text">填写提示</text>
			  <switch
				:checked="isWritePrompt"
			    @change="writePrompt"
			    color="#80b156"
			    style="transform: scale(0.7,0.7)"
			  />
			</view>
			<input type="text" class="tipText" v-model="tipContent" placeholder="请填写提示内容" v-if="isWritePrompt"/>
			<view :style="isGroup?'border: 1px dashed red;':''">
				<view class="min-switch">
				  <text class="text">选项分组</text>
				  <switch
					:checked="isGroup"
					@change="optionGroup"
					color="#80b156"
					style="transform: scale(0.7,0.7)"
				  />
				</view>
				<span v-show="isGroup">
					<view class="Divider" />
					<view class="min-switch" v-for="(item,index) in groupingArray" :key="index" >
						<image class="deleteOption" src="@/static/delete.png" @tap="removeGroup(item.id)" />
						<uni-easyinput type="text" v-model="item.content" placeholder="输入组别名称" :inputBorder='false' :focus='true'></uni-easyinput>
						<view class="more" @tap="addOption(item.id)">添加选项</view> >
					</view>
					<view  class="addGrou" @click="addGrou">添加分组</view>
				</span>
			</view>
			<view class="min-switch">
			  <text class="text">跳题设置</text>
			  <view style="transform: scale(0.7,0.7);font-size: 35rpx;color: #929292;">
				<view class="uni-list-cell-db" @click="jump">
						<view class="uni-input">{{nextTitle}}＞</view>
				</view>
			  </view>
			</view>
			<view class="min-switch">
			  <text class="text">一行显示选项数</text>
			  <view style="transform: scale(0.7,0.7);font-size: 35rpx;color: #929292;">
				<view class="uni-list-cell-db">
					<picker @change="numberOfOptionsChange" :value="index" :range="numberOfOptionsArray" mode = "selector">
						<view class="uni-input">{{numberOfOptionsArray[index]}}＞</view>
					</picker>
				</view>
			  </view>
			</view>
			<view class="setting">
				<button style="background-color: #80b156;color: white;" @click="sure">确认</button>
				<button @click.stop="back">返回</button>
			</view>
		</view>
		<modal ref="visible" @change="updataMore" @Group="updataGroup"></modal>
	</view>
</template>

<script>
	import Modal from "@/components/common/myPopup/myPopup"
	import drag from "@/components/common/drag/drag"
	import SnowflakeId from "snowflake-id";
	import { empty } from "../../uni_modules/uv-ui-tools/libs/function/test";
	const snowflake = new SnowflakeId({
	    mid: 42,
	    offset: (2019 - 1970) * 31536000 * 1000
	});
	var _this;
	export default{
		data() {
			return {
				formid:"",
				optionId:0, //开启允许填空或选项分组的选项id
				moreUpdata:[], //开启允许填空的选项数据
				title:"", // 题目标题
				subjectId:"", //题目id
				isMustAnswer:false, //是否必答
				isWritePrompt:false, //是否开启填写提示
				tipContent:"", //开启填空提示后的提示内容
				nextTitle:"未设置", //是否设置跳题
				is_nextTitle:false,// 判断是否允许跳题
				jumpingType:"不跳题",	// 跳题类型（默认不跳题）
				questionsJumpItems:"",	// 题目跳题的id
				numberOfOptions:"1", //一行显示选项数选择的值
				numberOfOptionsArray:["1","2","竖向排列","下拉菜单","横向排列"],//一行显示选项数
				index:0,
				optionArray:[ //选项数组
					{
						id:0,
						content:"",
						nextTitleId:"",
						moreUpdata:[]
					},
					{
						id:1,
						content:"",
						nextTitleId:"",
						moreUpdata:[]
					},
				],
				groupingArray:[ //分组数组
					{
						id:0,
						content:"",
						optionData:[]// 分配到的选项数据
					},
				],
				groupId:0,
				isGroup:false	,// 是否开启分组
			}
		},
		onLoad(option) {
			this.formid = option.formid
			_this = this;
			if(option.item){
				let data = JSON.parse(option.item)
				this.groupingArray = data.groupingArray
				this.isGroup = data.isGroup
				this.isMustAnswer = data.isMustAnswer
				this.isWritePrompt = data.isWritePrompt
				this.jumpingType = data.jumpingType
				this.numberOfOptions = data.numberOfOptions
				this.optionArray = data.optionArray
				this.questionsJumpItems = data.questionsJumpItems
				this.tipContent = data.tipContent
				this.title = data.title
			}
			if(option.subjectId){
				this.subjectId = option.subjectId
				this.is_nextTitle = true
				// 请求数据
				// this.$request('')
			}else{
				const id = snowflake.generate(); //运用雪花算法
				_this.subjectId = id //随机生成题目id
				this.is_nextTitle = false
			}
		},
		components:{
			Modal,
			drag
		},
		computed:{
			Optionsnum:function(){
				_this = this
				var mynum = 0
				for (var i = 0; i < _this.optionArray.length; i++) {
					if(!empty(_this.optionArray[i].content)){
						mynum++
					}
				}
				return mynum;
			}
		},
		onShow(){
			var page = getCurrentPages()
			var curren = page[page.length - 1]
			console.log(curren);
			if(curren.data.type){
				this.jumpingType = curren.data.type
				if(this.jumpingType == '选项跳题'){
					this.optionArray.splice(0,this.optionArray.length)
					this.optionArray = curren.data.radiovalue
					this.nextTitle = "已设置"
				}
				else if(this.jumpingType == '题目跳题'){
					this.nextTitle = "已设置"
					this.questionsJumpItems = curren.data.radiovalue.subjectId
				}else{		//不跳题
					this.nextTitle = "未设置"
					console.log(curren.data);
				}
			}
		},
		watch:{
			jumpingType:{
				handler(newvalue){
					if(newvalue !== '不跳题'){
						this.nextTitle = '已设置'
					}else{
						this.nextTitle = '未设置'
					}
				},
				deep:true
			}
		},
		methods:{
			back(){
				uni.navigateBack()
			},
			sure(){
				var newArray = []
				// 去除空选项
				for (var i = 0; i < this.optionArray.length; i++) {
					if(!empty(this.optionArray[i].content)){
						newArray.push(this.optionArray[i])
					}
				}
				console.log(_this);
				if(_this.optionArray.length < 2){
					uni.showModal({
						content:"请至少输入两个选项内容",
						confirmText:"知道了",
						showCancel:false
					})
					return;
				}
				else if(_this.title == ""){
					uni.showModal({
						content:"请输入题目名称",
						confirmText:"知道了",
						showCancel:false
					})
					return;
				}
				else if(_this.isWritePrompt && empty(this.tipContent)){
					uni.showToast({
						title:"请填写填空提示内容",
						icon:"none"
					})
					return;
				}
				else if(_this.isGroup){
					var a = 0;
					_this.groupingArray.forEach(item=>{
						a += item.optionData.length
					})
					if(a !== _this.optionArray.length){
						uni.showToast({
							title:"请将所有选项分组",
							icon:"none"
						})
						return ;
					}
				}
				else if(!_this.isGroup){ // 不分组清空分组数据
					this.groupingArray = []
				}
				let data = {
					questionType:1,
					title:this.title,
					formid:this.formid,
					subjectId:this.subjectId,
					isMustAnswer:this.isMustAnswer,
					isWritePrompt:this.isWritePrompt,
					tipContent:this.tipContent,
					jumpingType:this.jumpingType,
					questionsJumpItems:this.questionsJumpItems,
					numberOfOptions:this.numberOfOptions,
					optionArray:JSON.stringify(this.optionArray),
					groupingArray:JSON.stringify(this.groupingArray),
					isGroup:this.isGroup
				}
				this.$request('/QuestionTitle/updateAddMultipleChoiceQuestion','POST',data)
				.then(res=>{
					console.log(res);
					var pages = getCurrentPages();
					var prevPage = pages[pages.length - 2]; //上一个页面
					prevPage.setData({
					        singleData:data
					})
					uni.navigateBack()
				})
			},
			// 题目是否必答
			mustAnswer:function(e){
				this.isMustAnswer = e.detail.value
			},
			// 是否开启填空提示
			writePrompt:function(e){
				// 关闭提示清空内容
				if(!e.detail.value){
					this.tipContent = ""
				}
				// 展示提示内容框
				this.isWritePrompt = e.detail.value
			},

			// 排序方式
			numberOfOptionsChange: function(e) {
				this.index = e.detail.value
				this.numberOfOptions = this.numberOfOptionsArray[e.detail.value]
			},
			/************** 组别的添加与删除 *******************/
			addGrou(){
				var arrayLength = _this.groupingArray.length;
				if(arrayLength == 0){
					var newid = 0
				}else{
					var newid = _this.groupingArray[arrayLength-1].id+1
				}
				this.groupingArray.push({
					id: newid,
					content:"",
					optionData:[]
				})
			},
			removeGroup:function(id){
				var index = id
				var newArray = []
				_this.groupingArray.filter(item=>{
					if(item.id !== index){
						newArray.push(item)
					}
				})
				_this.groupingArray = newArray;
			},
			/************** 选项的添加与删除 *******************/
			addInner(e) {
				var arrayLength = _this.optionArray.length;
				if(arrayLength == 0){
					var newid = 0
				}else{
					var newid = _this.optionArray[arrayLength-1].id+1
				}
				this.optionArray.push({
					id: newid,
					content:"",
					nextTitleId:"",
					moreUpdata:[]
				});
				// console.log(_this.optionArray);
			},
			remove:function(id){
				var index = id
				var newArray = []
				_this.optionArray.filter(item=>{
					if(item.id !== index){
						newArray.push(item)
					}
				})
				_this.optionArray = newArray;
			},
			/****************** 是否允许填空 *********************/
			showMore(id){
				_this.optionId = id
				for (var i = 0; i < this.optionArray.length; i++) {
					if(this.optionArray[i].id == id){
						_this.$refs.visible.showModal(id,this.optionArray[i].moreUpdata)
					}
				}
				
			},
			// 数据更新
			updataMore(e){
				for (var i = 0; i < this.optionArray.length; i++) {
					if(this.optionArray[i].id == this.optionId){
						this.optionArray[i].moreUpdata = e
					}
				}
			},
			haha(value){
				console.log(value);
				this.optionArray = value
			},
			updata(value){
				this.optionArray = []
				for (var i = 0; i < value.length; i++) {
					this.optionArray[i] = value[i]
				}
				// 将id重新排序
				for (var i = 0; i < value.length; i++) {
					this.optionArray[i].id = i
				}
			},
			/************** 选项分组 ****************/
			optionGroup(e){
				this.isGroup = e.detail.value
			},
			addOption(id){ 
				_this.optionId = id
				_this.$refs.visible.showModal('group',id)
			},
			updataGroup(e){
				for (var i = 0; i < this.groupingArray.length; i++) {
					if(this.groupingArray[i].id == this.optionId){
						this.groupingArray[i].optionData = e
					}
				}
			},
			jump(){
				if(!this.is_nextTitle){
					uni.showModal({
						content:"此题为最后一题,不能设置跳题",
						showCancel:false,
						confirmText:"知道了",
						confirmColor:"#80b156"
					})
					return;
				}
				if(this.jumpingType == '题目跳题'){
					uni.navigateTo({
						url:"/components/addTitle/nextTitleSetting?data="+JSON.stringify(this.optionArray)+"&subjectId="+this.subjectId+'&formid='+this.formid+'&radiovalue='+this.questionsJumpItems+'&jumpingType='+this.jumpingType
					})
				}
				else{
					uni.navigateTo({
						url:"/components/addTitle/nextTitleSetting?data="+JSON.stringify(this.optionArray)+"&subjectId="+this.subjectId+'&formid='+this.formid+'&jumpingType='+this.jumpingType
					})
				}
			}
		}
	}
</script>

<style lang="less">
	label{
		font-size: 30rpx;
		color: #abafb2;
	}
	.deleteOption{
		width: 6%;
		height: 60%;
		margin: 20rpx 30rpx;
				cursor: pointer;
	}
	.singleTopicSelection{
		// width: 100%;
		// height: 100%;
		// position: fixed;
		// top: 0rpx; left: 0rpx; bottom: 0rpx; right: 0rpx;
		background-color: #f3f3f3;
		// transition: .3s;
		// z-index: 999;
		.title{
			width: 90%;
			margin: 0 30rpx;
			span{
				color: red;
			}
		}
		.setting{
			width: 90%;
			margin: 20rpx 30rpx;
			button{
				margin-top: 30rpx;
			}
		}
		.tipText{
			border: 1px solid #abafb2;
			width: 90%;
			margin-left: 30rpx;
			border-radius: 5px;
		}
		.min-switch {
		  height: 80rpx;
		  font-size: 32rpx;
		  margin: 0 20rpx;
		  padding: 20rpx 0;
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  background: #fff;
		  border-radius: 5rpx;
		  .text{
		    padding-left: 20rpx
		  }
		  .more{
			  width: 10%;
			  height: 100%;
			  transform: scale(0.7,0.7);
			  cursor: pointer;
		  }
		}
	}
	.Divider {
	  border-top: 1px solid #eee;
	  border-bottom: 1px solid #eee;
	}
	.addOption{
		height: 80rpx;
		font-size: 32rpx;
		margin: 0 20rpx;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 5rpx;
		color: #80b156;
	}
	.addGrou{
		width: 30%;
		color: white;
		background-color: #80b156;
		border-radius: 10px;
		position: relative;
		left: 250rpx;
		text-align: center;
		margin-bottom: 15rpx;
	}
</style>